<template>
    <div class="screen">
        <div ref="content" class="content">
            <BorderBox11 :title="'扶贫展销系统'" class="container">
                <ul class="header">
                    <div
                        class="adress-left"
                        v-if="['Distribute'].findIndex((item) => item === route.name) === -1"
                    >
                        数据来自：{{ userInfo.adress }}
                    </div>
                    <li v-for="(item, index) in list" @click="jumpRoute(item.path)" :key="index">
                        {{ item.meta.label }}
                        <span
                            :class="{
                                'span-active': route.path === item.path
                            }"
                        ></span>
                    </li>
                    <span class="time-rg">
                        {{ time }}
                        <span style="margin-left: 5px">
                            {{ week[new Date().getDay()] }}
                        </span>
                    </span>
                </ul>
                <div>
                    <RouterView></RouterView>
                </div>
            </BorderBox11>
        </div>
    </div>
</template>
<script lang="ts">
import { BorderBox8, BorderBox10, BorderBox11, BorderBox13 } from '@kjgl77/datav-vue3'
import { defineComponent, reactive, toRefs, onMounted, ref, onUnmounted } from 'vue'
import { useRoute, useRouter } from 'vue-router'

import { screenList } from '@/router/constantRouter'

import useMainStore from '@/stores'

export default defineComponent({
    name: 'Sales',
    components: {
        BorderBox8,
        BorderBox10,
        BorderBox11,
        BorderBox13
    },
    setup() {
        const { userInfo } = useMainStore().useUserStore()
        const route = useRoute()
        console.log(route)

        const router = useRouter()
        const components = {
            content: ref()
        }
        const constant = {
            list: screenList,
            timer: null as any,
            week: ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六']
        }
        const state = reactive({
            time: new Date().toLocaleString()
        })
        onMounted(() => {
            components.content.value.style.transform = `scale(${methods.getScale()})  translate(-50%, -50%)`
            constant.timer = setInterval(() => {
                state.time = new Date().toLocaleString()
            }, 1000)
        })
        onUnmounted(() => {
            clearInterval(constant.timer) //卸载定时器
        })
        window.onresize = () => {
            ///当页面大小发生变化的时候触发
            components.content.value.style.transform = `scale(${methods.getScale()}) translate(-50%, -50%) `
        }
        const methods = {
            getScale(w = 1920, h = 1080) {
                const ww = window.innerWidth / w
                const wh = window.innerHeight / h
                return ww < wh ? ww : wh
            },
            jumpRoute(path: any) {
                router.push(path)
            }
        }
        return {
            ...toRefs(state),
            ...constant,
            ...components,
            ...methods,
            route,
            userInfo
        }
    }
})
</script>
<style lang="scss" scoped>
.screen {
    position: relative;
    height: 100vh;
    width: 100vw;
    // background-color: #001529;
    background-color: black;
    .content {
        position: fixed;
        height: 1080px;
        width: 1920px;
        left: 50%;
        top: 50%;
        transform-origin: left top; ///确保缩放正常，而不是围绕右下角缩放
    }
    .container {
        width: 100%;
        height: 100%;
        display: flex;
        flex-direction: row;
        justify-content: center;
        padding: 0 20px;
        .header {
            width: 100%;
            color: #ffffff;
            padding: 0;
            margin-top: 70px;
            box-sizing: border-box;
            display: flex;
            justify-content: center;
            position: relative;
            .adress-left {
                position: absolute;
                left: 10px;
                right: 0;
                top: 0;
                bottom: 0;
                display: flex;
                align-items: center;
                color: #ffffff;
            }
            .time-rg {
                position: absolute;
                right: 10px;
                height: 40px;
                line-height: 40px;
                text-align: center;
            }
            li {
                position: relative;
                width: 150px;
                height: 40px;
                text-align: center;
                line-height: 40px;
                list-style: none;
                margin: 0 40px;
                cursor: pointer;

                span {
                    display: block;
                    z-index: -1;
                    position: absolute;
                    left: 0;
                    right: 0;
                    top: 0;
                    bottom: 0;
                    transition: all 0.3s;
                    font-size: 18px;
                }

                &:hover {
                    span {
                        background-color: #1677ff;
                        opacity: 1;
                    }
                }
                .span-active {
                    background-color: #1677ff;
                    opacity: 1;
                }
            }
        }
    }
}
</style>
